星尘

11. 生命周期函数

发表于 更新于 分类于

生命周期函数：指的是在某一时刻，组件会自动执行的函数生命周期函数

挂载

  1. componentWillMount

    组件即将被挂载的时候执行

  2. render

  3. componentDidMount

    组件被挂载之后执行

1
2
3
4
5
6
7
8
9
// 组件即将被挂载的时候执行 
 componentWillMount(){
     console.log('componentWillMount')
 }

 // 组件被挂载之后执行 
 componentDidMount(){
     console.log('componentDidMount')
 }

组件更新

props发生变化

  1. componentWillReceiveProps

    当一个组件从父组件接受了参数，只要父组件的render函数被重新执行了，子组件的 componentWillReceiveProps 就会执行（注意：父组件的render函数第一次执行此函数是不会被执行的，只有父组件的render函数不是第一次执行，且子组件从父组件接受到了参数，componentWillReceiveProps才会被执行）

1
2
3
4
5
6
// 当一个组件从父组件接受了参数，只要父组件的render函数被重新执行了，子组件的 componentWillReceiveProps 就会执行
// 注意：父组件的render函数第一次执行此函数是不会被执行的，只有父组件的render函数不是第一次执行，且子组件从父组件接受到了参数，componentWillReceiveProps才会被执行

componentWillReceiveProps(){
	console.log('componentWillReceiveProps')
}

  1. shouldComponentUpdate

    在组件更新之前执行，返回bool值

  2. componentWillUpdate

    shouldComponentUpdate 返回true就执行 componentWillUpdate

  3. render

  4. componentDidUpdate

    组件更新完成之后会被执行

states发生变化

  1. shouldComponentUpdate
  2. componentWillUpdate
  3. render
  4. componentDidUpdate

props发生变化和states发生变化相比，props多了一个componentWillReceiveProps生命周期函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 在组件更新之前执行，返回bool值
shouldComponentUpdate(){
    console.log('shouldComponentUpdate')
    return true;
}

// shouldComponentUpdate 返回true就执行 componentWillUpdate
componentWillUpdate(){
    console.log('componentWillUpdate')
}

// 组件更新完成之后会被执行
componentDidUpdate(){
    console.log('componentDidUpdate')
}

卸载

componentWillUnmount
当子组件被移除的时候会执行

1
2
3
4
// 当子组件被移除的时候会执行
componentWillUnmount(){
    console.log('componentWillUnmount')
}

图解

https://github.com/rexyan/simple_react/tree/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%87%BD%E6%95%B0